<!DOCTYPE html>
<html ng-app="myApp" ng-controller="FaultsController">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title> - 表单向导</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico"> <link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="../css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="../css/plugins/steps/jquery.steps.css" rel="stylesheet">
    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/style.css?v=4.1.0" rel="stylesheet">

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>故障填写向导</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="form_wizard.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="form_wizard.html#">选项1</a>
                                </li>
                                <li><a href="form_wizard.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">



                        <form id="form" action="form_wizard.html#" class="wizard-big">
                            <h1>故障基本信息</h1>
                            <fieldset>

                                <div class="row">
                                    <div class="col-sm-8">
                                        <div class="form-group">
                                            <label>故障名称 *</label>
                                            <input type="text" class="form-control " ng-model="fault.title" id="title">
                                        </div>
                                        <div class="form-group">
                                            <label>故障编号 *</label>
                                            <input  type="text" class="form-control " ng-model="fault.number" id="number">
                                        </div>
                                        <div class="form-group">
                                            <label>故障机床所在工厂 *</label>
                                            <input type="text" class="form-control " ng-model="fault.factory" id="factory">
                                        </div>

                                        <div class="form-group">
                                            <label>故障机床厂家型号 *</label>
                                            <input   type="text" class="form-control " ng-model="fault.machine_type" id="machine_type">
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="text-center">
                                            <div style="margin-top: 20px">
                                                <i class="fa fa-sign-in" style="font-size: 180px;color: #e5e5e5 "></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </fieldset>
                            <h1>详细信息</h1>
                            <fieldset>
                                <h2>故障详细信息</h2>
                                <div class="row">
                                    <div class="col-sm-8">
                                        <div class="form-group">
                                            <label>故障部位 *</label>
                                            <input  type="text" class="form-control " ng-model="fault.location" id="location">
                                        </div>

                                        <div class="form-group">
                                            <label>故障严重等级 *</label>
                                            <!--<input  name="confirm" type="text" class="form-control " ng-model="fault.location">-->
                                            <div class="form-control">
                                                <div class="radio radio-info radio-inline">
                                                    <input type="radio" id="inlineRadio1" value="轻微" name="radioInline" checked="" ng-model="fault.level">
                                                    <label for="inlineRadio1"> 轻微 </label>
                                                </div>
                                                <div class="radio radio-info radio-inline">
                                                    <input type="radio" id="inlineRadio2" value="较为严重" name="radioInline" checked="" ng-model="fault.level">
                                                    <label for="inlineRadio2"> 较为严重 </label>
                                                </div>
                                                <div class="radio radio-info radio-inline">
                                                    <input type="radio" id="inlineRadio3" value="严重" name="radioInline" checked="" ng-model="fault.level">
                                                    <label for="inlineRadio3"> 严重 </label>
                                                </div>
                                                <div class="radio radio-info radio-inline">
                                                    <input type="radio" id="inlineRadio4" value="非常严重" name="radioInline" checked="" ng-model="fault.level">
                                                    <label for="inlineRadio4"> 非常严重 </label>
                                                </div>

                                            </div>
                                        </div>


                                        <div class="form-group">
                                            <label>故障发生具体时间 *</label>
                                            <div >
                                                <input class="layer-date" id="occurTime" placeholder="" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" style="padding:7px 12px;  width: 230px">
                                                <label class="laydate-icon"></label>
                                            </div>
                                        </div>


                                        <!--<div class="form-group input-group date form_date" id="data_1">-->
                                            <!--<label class="font-noraml">故障发生时间 *</label>-->
                                            <!--<div class="input-group date">-->
                                                <!--<span class="input-group-addon"><i class="fa fa-calendar"></i></span>-->
                                                <!--<input type="text" class="form-control" value="2016-11-11" ng-model="fault.occur_date" id="occur_date">-->
                                            <!--</div>-->
                                        <!--</div>-->

                                    </div>





                                    <div class="col-sm-4">
                                        <div class="text-center">
                                            <div style="margin-top: 20px">
                                                <i class="fa fa-sign-in" style="font-size: 180px;color: #e5e5e5 "></i>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </fieldset>

                            <h1>详细描述</h1>
                            <fieldset>
                                <div class="form-group">
                                    <label>故障详细描述 *</label>
                                    <textarea class="form-control " ng-model="fault.description"
                                              cols="20" rows="10" id="description"></textarea>
                                </div>
                            </fieldset>

                            <h1>维修人员信息</h1>
                            <fieldset>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>姓名 *</label>
                                            <input  type="text" class="form-control required" ng-model="fault.manu_man_name" id="manu_man_name" >
                                        </div>
                                        <div class="form-group">
                                            <label>Email *</label>
                                            <input   type="text" class="form-control  email" id="manu_man_email">
                                        </div>

                                        <div class="form-group">
                                            <label>手机 *</label>
                                            <input   type="text" class="form-control" ng-model="fault.manu_man_tel" id="manu_man_tel">
                                        </div>
                                    </div>

                                </div>

                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- 全局js -->
    <script src="../js/jquery.min.js?v=2.1.4"></script>
    <script src="../js/bootstrap.min.js?v=3.3.6"></script>


    <!--jquery cookie-->
    <script src="../js/js.cookie.js"></script>

    <!-- 自定义js -->
    <script src="../js/content.js?v=1.0.0"></script>


    <!-- Steps -->
    <script src="../js/plugins/staps/jquery.steps.min.js"></script>

    <!-- Jquery Validate -->
    <script src="../js/plugins/validate/jquery.validate.min.js"></script>
    <script src="../js/plugins/validate/messages_zh.min.js"></script>



    <script>
        $(document).ready(function () {
            $("#wizard").steps();
            $("#form").steps({
                bodyTag: "fieldset",
                onStepChanging: function (event, currentIndex, newIndex) {
                    // Always allow going backward even if the current step contains invalid fields!
                    if (currentIndex > newIndex) {
                        return true;
                    }

                    // Forbid suppressing "Warning" step if the user is to young
                    if (newIndex === 3 && Number($("#age").val()) < 18) {
                        return false;
                    }

                    var form = $(this);

                    // Clean up if user went backward before
                    if (currentIndex < newIndex) {
                        // To remove error styles
                        $(".body:eq(" + newIndex + ") label.error", form).remove();
                        $(".body:eq(" + newIndex + ") .error", form).removeClass("error");
                    }

                    // Disable validation on fields that are disabled or hidden.
                    form.validate().settings.ignore = ":disabled,:hidden";

                    // Start validation; Prevent going forward if false
                    return form.valid();
                },
                onStepChanged: function (event, currentIndex, priorIndex) {
                    // Suppress (skip) "Warning" step if the user is old enough.
                    if (currentIndex === 2 && Number($("#age").val()) >= 18) {
                        $(this).steps("next");
                    }

                    // Suppress (skip) "Warning" step if the user is old enough and wants to the previous step.
                    if (currentIndex === 2 && priorIndex === 3) {
                        $(this).steps("previous");
                    }
                },
                onFinishing: function (event, currentIndex) {
                    var form = $(this);

                    // Disable validation on fields that are disabled.
                    // At this point it's recommended to do an overall check (mean ignoring only disabled fields)
                    form.validate().settings.ignore = ":disabled";

                    // Start validation; Prevent form submission if false
                    return form.valid();
                },
                onFinished: function (event, currentIndex) {
                    var form = $(this);

                    console.log($("#occurTime").val());

                    $.post("/api/faults",{
                        "title" : $("#title").val(),
                        "number" : $("#number").val(),
                        "factory" : $("#factory").val(),
                        "machine_type" : $("#machine_type").val(),
                        "location" : $("#location").val(),
                        "level" : $("input[name='radioInline']:checked").val(),
                        "occur_date" : $("#occurTime").val(),
                        "description" : $("#description").val(),
                        "manu_man_name" : $("#manu_man_name").val(),
                        "manu_man_email" : $("#manu_man_email").val(),
                        "manu_man_tel" : $("#manu_man_tel").val()


                    },function(result){
                        console.log(result);

                        document.cookie="faultId="+result._id;


                        window.location.href = "form_webuploader.html";
                    });



                }
            }).validate({
                errorPlacement: function (error, element) {
                    element.before(error);
                },
                rules: {
                    confirm: {
                        equalTo: "#password"
                    }
                }
            });
        });
    </script>


    <!-- layerDate plugin javascript -->
    <script src="../js/plugins/layer/laydate/laydate.js"></script>


    <!--angular-->
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular-cookies.js"></script>

    <script type="text/javascript" src="../controllers/projects.js"></script>
    

</body>

</html>
